<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>tiscript脚本学习</title>
<style>
    #mouse {
        border: 1px solid #ccc;
        width: 500px;
        height: 500px;
    }
</style>
</head>
<body>
<div id="box">
    <ul>
        <li>1111</li>
        <li>2222</li>
        <li>3333</li>
    </ul>
</div>
<div id="form">
    ID: <input type="text" name="id" value="001"><br>
    姓名：<input type="text" name="name"><br>
    性别：<input type="radio" name="sex" value="0">男
    <input type="radio" name="sex" value="1">女
    <button id="btn1">按钮</button>
    <button id="btn2">定时</button>
</div>
<div id="event">
    <input type="text" id="ipt"><br>
    <input type="text" id="ipt2"><br>
    <button id="btn3">单击</button>
    <br>
    <button id="btn4">双击</button>
    <br>
    <select id="sel">
        <option value="11">11</option>
        <option value="22">22</option>
        <option value="33">33</option>
    </select>
    <div id="mouse"></div>
</div>
<script type="text/javascript">
    //类似jquery的ready()ss
    self.ready = function () {
        testDom();
        testEvent();
    }

    // 测试Dom操作
    function testDom() {
        // 选择元素, 不加引号
        var box = self.$(#box);
        // 加引号选择
        var box2 = self.select("#box")
        //选择多个元素
        var lis = self.$$(#box > ul > li)
        stdout.println(lis.length)
        var lis2 = self.selectAll("#box > ul > li")
        stdout.println(lis2.length)
        stdout.println(lis.first.text)
        stdout.println(lis.last.text)

        var li = self.$(#box > ul > li
    :
        nth - child(1)
    )

        stdout.println(li.next.text)

        stdout.println(box.attrbutes["id"])
        // 设置属性
        box.attributes["status"] = "open";

        //设置样式
        li.style["background"] = "#f00"

        // 元素是否可见
        var li2 = self.$(#box > ul > li
    :
        nth - child(2)
    )
        li2.style["display"] = "none"
        if (!li2.isVisible) {
            stdout.println("li2不可见")
        }
        // 遍历元素
        for (var child in lis) {
            stdout.println(child.text)
        }
        // 动态创建元素
        var li4 = new Element("li")
        // 将li元素追究到ul元素
        $(#box > ul).append(li4)
        // 需要先在上一步把元素添加到dom树上， 再设置文本
        li4.text = "444"

        // 追加html内容, $开头的函数, 可以在参数中放置不带引号的html
        $(#box > ul).$append( < li > 555 < /li>)
        // add before or after
        $(#box).$after( < div > after < /div>)
        // delete
        $(#box > ul > li
    :
        nth - child(4)
    ).
        remove()

        // 设置元素状态
        // set readonly
        $(input[name = 'id']).setState(Element.STATE_READONLY)
        //set force
        $(input[name = 'name']).setState(Element.STATE_FOCUS)
        // SET CHECKED
        $(input[name = 'sex'][value = '1']).setState(Element.STATE_CHECKED)
        // SET disabled
        $(#btn1).setState(Element.STATE_DISABLED)
        // timer
        var cnt = 5
        $(#btn2).timer(1000, function () {
            if (cnt == 0) {
                // false 停止定时器
                return false
            }
            this.text = "第" + cnt + "次"
            cnt--
            return true
        })
    }

    // test element event
    function testEvent() {
        // 单click
        $(#btn3).onClick = function () {
            stdout.println("btn3被点击了")
        }
        // double click
        $(#btn4).on("dblclick", function () {
            stdout.println("btn4被双击了")
        })
        $(#ipt).on("keyup", function () {
            stdout.println(this.value)
        })
        //
        $(#sel).on("change", function () {
            stdout.println(this.value)
        })
        // 移除事件函数
        $(#btn4).off("dbclick")
        // or
        $(#btn4).unsubscribe("dblclick")
        // 判断事件类型和按键码值
        $(#ipt2).on("keyup", function (evt) {
            if (evt.type == Event.KEY_UP && evt.keyCode == Event.VK_RETURN) {
                stdout.println("你回车了")
            }
        })
        // 鼠标移动事件
        $(#mouse).on("mousemove", function (evt) {
            var str = ""
            str += "相对于div本身的X:" + evt.x + " y: " + evt.y + "<br>"
            str += "相对于根元素html本身的 x:" + evt.xRoot + " y: " + evt.yRoot
            str += "相对于window窗口本身的 x:" + evt.xView + " y:" + evt.yView
            this.html = str
        })
    }

</script>
</body>
</html>

